<template>
    <div>
        <ul class="lists">
            <li v-for="course in courseList" :key="course.id">
                <a>
                    <img :src="course.pic" class="list-top" alt />  
                </a>
                
                <div class="list-bottom">
                    <p class="course-title">{{course.title}}</p>
                    <span>¥{{course.price}}元</span>
                    <cube-button :primary="true" class="cart" @click="addCart(course)">加入购物车</cube-button>
                </div>
            </li>
        </ul>
    </div>
    
</template>
<script>
import {mapMutations} from 'vuex'
import * as types from '@/store/action-types.js'
export default {
    props:['courseList'],
    methods: {
        ...mapMutations('course',[types.ADD_CARLIST]),
        // 加入购物车
        addCart(course){
            this[types.ADD_CARLIST](course);
        }
    },
  
}
</script>
<style lang="less">
.lists {
  padding: 0 10%;

  li {
    width: 100%;
    background: #fff;
    border:1px solid lightblue;
    border-radius: 5px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    overflow: hidden;// 清除浮动
  }

  a {
    float: left;
    width: 40%;
    padding: 5% 5% 0 5%;
    display: block;
    margin-bottom: 10px;
  }

  img {
    float: left;
    width: 100%;
    height: 80px;
  }
}

.list-bottom {
  float: left;
  line-height: 25px;
  padding-top: 5%;
    p{
        padding:0 0 0 10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    span{
       padding:5px 0 5px 10px   
    }  
    .cube-btn {
        margin-left: 5%;
        height: 10px;
        line-height: 5px;
    }
}
</style>